<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>web04</title>
		<meta name="description" content="" />
		<meta name="author" content="prairiedog" />

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
	</head>

	<body>
		<div id="d">div입니다</div>
		script로 모든 Element에 접근할 수 있습니다.
		.getElementById("아이디");
		.getElementByTagName("태그이름");<br>
		<img id="img1" width="500"
		src="">
		<br>
		<img id="img2" width="150" src="111.jpg">
		<img id="img3" width="150" src="222.jpg">
		<button id="btn1">이미지 바꾸기</button>
		<script>
			var d= document.getElementById("d");
			//alert(d.innerHTML);
			d.innerHTML="div내용을 바꾸자";
			var img1 = document.getElementById("img1");
			var original=img1.src;
			var img2 = document.getElementById("img2");
			var img3 = document.getElementById("img3");
			//alert(img1.src);
			var btn1=document.getElementById("btn1");
			btn1.onclick=function(){
				img1.src="http://t1.gstatic.com/images?q=tbn:ANd9GcQQE4rHYOUAluRlYvxJmVQbFv0TtGZJFVBaNBzW6Sg2VJ8SkMag";
			}
			img2.onmouseover=function(){
				img1.src=img2.src;
			}
			img2.onmouseout=function(){
				img1.src=original;
			}
			img3.onmouseover=function(){
				img1.src=img3.src;
			}
			img3.onmouseout=function(){
				img1.src=original;
			}			
		</script>
		<br><br>
		<button id="left">왼쪽그림</button>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<button id="right">오른쪽 그림</button><br>
		<div id="t">그림 제목 : </div>
		<img id="gallery" width="300">
		<script>
			var left=document.getElementById("left");
			var right=document.getElementById("right");
			var gallery=document.getElementById("gallery");
			var t=document.getElementById("t");
			images=["111.jpg","222.jpg","333.jpg","444.jpg"];
			imgname=["문채원","채워니","이쁘니","여신"];
			var i=0;
			gallery.src=images[i];
			t.innerHTML="그림 제목 : "+imgname[0];
			left.onclick=function(){
				i--;
				if(i<0)	i=images.length-1;
				gallery.src=images[i];
				t.innerHTML="그림제목 : "+imgname[i];
			}
			// setInterval(function,시간) : 반복하기
			setInterval(left.onclick,5000);
			
			right.onclick=function(){
				i++;
				if(i==images.length)	i=0;
					gallery.src=images[i];
					t.innerHTML="그림제목 : "+imgname[i];
				}
	
		</script>
	</body>
</html>
